.FrontStyle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;

    &>.ant-tabs {
        width: 100%;
        height: 100%;
    }

    .ant-tabs-content,
    .ant-tabs-tabpane {
        height: 100%;
    }

    .StyleTopBox {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;

        &>.StyleSimulation {
            width: 100%;
            aspect-ratio: 1920/1080;
            margin-bottom: 16px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            overflow: hidden;

            &.Theme {
                position: relative;
                z-index: 1;

                &>.ImageBack {
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 1;
                    width: 100%;
                    height: 100%;
                }

                &>.ImageNav {
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 2;
                    width: 100%;
                }

                &>.ImageBtm {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    z-index: 2;
                    width: 100%;
                }

                &>.ImageLeft,
                &>.ImageRight {
                    position: absolute;
                    z-index: 2;
                }


            }

            &.Nav {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                &>div {
                    width: 100%;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    flex-direction: column;

                    .NavClass {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &>div {
                            width: 100px;
                            height: 40px;
                            background: rgba(0, 0, 0, 0.15);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin: 0 4px;
                            cursor: pointer;
                        }
                    }

                }
            }

            &.SmallTitle {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                &>.SmallTop {
                    width: 100%;
                    position: relative;
                    height: 40px;
                    z-index: 1;

                    &>.ImageClass {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &>img {
                            height: 100%;

                            &:nth-child(1) {
                                width: 200px;
                            }

                            &:nth-child(2) {
                                flex: 1;
                            }

                            &:nth-child(3) {
                                width: 200px;
                            }
                        }
                    }

                    &>.TitleClass {
                        position: absolute;
                        z-index: 2;
                        height: 100%;
                        left: 0;
                        top: 0;
                        line-height: 40px;
                        text-indent: 56px;
                        letter-spacing: 2px;
                        font-style: normal;
                    }

                    &>.CloseIcon {
                        position: absolute;
                        top: 0;
                        right: 0;
                        z-index: 2;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100%;
                        aspect-ratio: 1/1;
                    }

                }

                &>.SmallRender {
                    width: 100%;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 40px;
                    font-family: 'ShuHeiTi';
                    font-weight: 600;
                    color: white;
                    text-shadow: 2px 2px 4px #262626;
                    background: linear-gradient(45deg, red, yellow);
                }
            }

            &.Scroll {
                overflow: scroll;

                &>div {
                    width: 100vw;
                    height: 100vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: YouSheBiaoTiHei;
                    font-weight: 600;
                    font-size: 20vw;
                    color: #fff;
                    text-shadow: 8px 8px 16px #262626;
                }

                &::-webkit-scrollbar {
                    width: calc(var(--scrollSize) * 1px);
                    height: calc(var(--scrollSize) * 1px);
                }

                &::-webkit-scrollbar-thumb {
                    background: var(--scrollColor);
                    border-radius: calc(var(--scrollRadius) * 1px);
                }

                &::-webkit-scrollbar-thumb:hover {
                    background: var(--scrollHover);
                }

                &::-webkit-scrollbar-track {
                    background: var(--scrollTrack);
                }

                &::-webkit-scrollbar-corner {
                    background: var(--scrollcorner);
                }
            }

            &.Table {
                &>.ant-pro-table {
                    .ant-table {
                        background: transparent;
                    }

                    .ant-table-thead>tr>th {
                        padding: 0 8px;
                        background: var(--th_back);
                        height: calc(var(--th_height) * 1px);
                        color: var(--th_color);
                        font-size: calc(var(--th_fontSize) * 1px);
                        font-family: var(--th_fontFamily);
                        font-weight: var(--th_fontWeight);
                        font-style: var(--th_fontStyle);

                        &::before {
                            content: none;
                        }
                    }

                    .ant-table-tbody>tr>td {
                        cursor: pointer;
                        border-bottom: calc(var(--td_border_size) * 1px) var(--td_border_type) var(--td_border_color);
                        background: var(--td_background);
                        color: var(--td_color);
                        font-size: calc(var(--td_fontSize) * 1px);
                        font-family: var(--td_fontFamily);
                        font-weight: var(--td_fontWeight);
                        font-style: var(--td_fontStyle);

                        * {
                            color: var(--td_color);
                            font-size: calc(var(--td_fontSize) * 1px);
                            font-family: var(--td_fontFamily);
                            font-weight: var(--td_fontWeight);
                            font-style: var(--td_fontStyle);
                        }

                        &.ant-table-cell-row-hover {
                            background: var(--td_hover_back);
                            color: var(--td_hover_color);

                            * {
                                color: var(--td_hover_color);
                            }
                        }
                    }

                    .ant-table-cell-fix-left,
                    .ant-table-cell-fix-right {
                        background: var(--td_fix_back) !important;

                        &>div {
                            * {
                                color: var(--td_fix_color) !important;
                            }
                        }
                    }

                    form {
                        .ant-form-item-label {
                            position: absolute;
                            z-index: 50;
                            top: -10px;
                            left: 8px;

                            &>.ant-form-item-no-colon {
                                display: none;
                            }

                            &>label {
                                font-weight: var(--top_labelWeight);
                                font-family: var(--top_labelFamily);
                                font-style: var(--top_labelStyle);
                                color: var(--top_labelFill);
                                background: linear-gradient(calc(var(--top_labelDeg) * 1deg), var(--top_labelColorA01), var(--top_labelColorA02));
                                padding: 0 8px;
                                font-size: 16px;
                                height: 20px;
                                line-height: 20px;
                                backdrop-filter: blur(8px);
                                border-radius: 6px;
                                overflow: hidden;
                            }
                        }

                        .ant-btn-primary,
                        .ant-btn-default,
                        .ant-pro-query-filter-collapse-button {
                            height: 48px;
                            padding: 0 16px;
                            font-size: calc(var(--top_BtnSize) * 1px);
                            font-family: var(--top_BtnFamily);
                            font-weight: var(--top_BtnWeight);
                            font-style: var(--top_BtnStyle);

                            &.ant-btn-primary {
                                background: var(--top_primaryBack);
                                color: var(--top_primaryFill);
                            }

                            &.ant-btn-default {
                                border-color: var(--top_defaultBor);
                                color: var(--top_defaultFill);
                                background: transparent;
                            }

                            &.ant-pro-query-filter-collapse-button {
                                color: var(--top_lineBtnFill);
                            }
                        }

                        .ant-form-item-row {
                            position: relative;
                            z-index: 1;
                        }

                        .ant-input-affix-wrapper,
                        .ant-input-outlined,
                        .ant-select-single,
                        .ant-input-number-input,
                        .ant-picker,
                        .ant-color-picker-trigger {
                            height: 48px;
                            background: linear-gradient(calc(var(--top_inputDeg) * 1deg), var(--top_inputColorA01), var(--top_inputColorA02));
                            border: none;

                            &.ant-select-single {
                                border-radius: 6px;
                                overflow: hidden;

                                &>.ant-select-selector {
                                    border: none;
                                }
                            }
                        }

                        input,
                        textarea,
                        .ant-select-selector,
                        .ant-picker-suffix,
                        .ant-input-suffix,
                        .ant-select-arrow {
                            font-size: calc(var(--top_textSize) * 1px) !important;
                            font-weight: var(--top_textWeight);
                            font-family: var(--top_textFill);
                            font-style: var(--top_textStyle);
                            color: var(--top_textFill);
                            background: transparent;

                            &::placeholder {
                                color: var(--top_placFill);
                            }
                        }
                    }

                    .ant-pagination {
                        margin-top: 8px;

                        &>li:first-child {
                            flex: 1;
                            color: var(--pag_first_color);
                            font-size: calc(var(--pag_first_fontSize) * 1px);
                            font-family: var(--pag_first_fontFamily);
                            font-weight: var(--pag_first_fontWeight);
                            font-style: var(--pag_first_fontStyle);
                        }

                        &>li {
                            overflow: hidden;
                            font-size: calc(var(--pag_li_fontSize) * 1px);

                            &.ant-pagination-item-active {
                                border-color: var(--pag_hover_border);

                                &>a {
                                    background: var(--pag_hover_back);
                                    color: var(--pag_hover_color);
                                }
                            }

                            &>a {
                                background: var(--pag_li_back);
                                color: var(--pag_li_color);
                                font-family: var(--pag_li_fontFamily);
                                font-weight: var(--pag_li_fontWeight);
                                font-style: var(--pag_li_fontStyle);
                            }
                        }

                    }

                    &>.ant-pro-table-search {
                        background: var(--top_Back) !important;
                        margin-bottom: 8px;

                        &>.ant-form {
                            padding: 16px 16px 0 16px;
                        }
                    }

                    &>.ant-pro-card {
                        background: var(--btm_Back);

                        &>.ant-pro-card-body {
                            padding-inline: 16px;

                            .ant-pro-table-list-toolbar-setting-item {
                                color: var(--btm_toolColor);
                                font-size: calc(var(--btm_toolSize) * 1px);
                                margin-bottom: 4px;
                            }

                            &>.ant-pro-table-list-toolbar {
                                &>.ant-pro-table-list-toolbar-container {
                                    padding: 0px;
                                }
                            }
                        }
                    }

                }
            }
        }

        &>.StyleParameter {
            width: 100%;
            flex: 1;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                display: none;
            }

            &>.FormTemplate {
                width: 100%;
                height: 100%;

                &>.FormTemp {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    z-index: 1;
                    align-content: flex-start;

                    .TwoFormItem {
                        width: 100%;
                        padding: 0;
                    }
                }


            }
        }

    }


}